<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM版_滑动门</title>
<link rel="stylesheet" type="text/css" href="CSS/base.css">
<link rel="stylesheet" type="text/css" href="CSS/solidBox.css">
<script type="text/javascript">	
	function solidBox(boxId){
		var boxObj = document.getElementById(boxId);
		var headObj = boxObj.children[0];
		var contentObj = boxObj.children[1];
		for(var i=0 ; i < headObj.children.length ; i++){
			(function(k){
				headObj.children[i].onmouseover = function(){
					for(var j=0 ; j < headObj.children.length ; j++){
						if(j==k){
							headObj.children[j].className = "hover";
							contentObj.children[j].style.display = "block";
						}else{
							headObj.children[j].className = "";
							contentObj.children[j].style.display = "none";
						}
					}	
				}
			})(i);
		}
	}
	
	window.onload = function(){
		solidBox('solidBox');
		solidBox('solidBox2');
	}
</script>
</head>

<body>
	<!--第1个盒子-->
	<div id="solidBox" class="solidBox">
    	<h3 class="solidBox_title clearfix">
        	<strong class="hover">足球</strong>
            <strong>篮球</strong>
            <strong>其他</strong>
        </h3>
        <div class="solidBox_content">
        	<div style="display:block;">
        		足球对应的内容
            </div>
            <div style="display:none;">
                篮球对应的内容
            </div>
            <div style="display:none;">
                其他对应的内容
            </div>
        </div>
    </div>
    <!--第2个盒子-->
    <div id="solidBox2" class="solidBox">
    	<h3 class="solidBox_title clearfix">
        	<strong class="hover">音乐</strong>
            <strong>电影</strong>
            <strong>八卦</strong>
        </h3>
        <div class="solidBox_content">
        	<div style="display:block;">
        		音乐对应的内容
            </div>
            <div style="display:none;">
                电影对应的内容
            </div>
            <div style="display:none;">
                八卦对应的内容
            </div>
        </div>
    </div>
</body>
</html>
